<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		#nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #eeeeee;
			}
			
			#nav li {
				float: left;
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #333;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #dddddd;
				font-weight: 700;
				color: #222;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">Homepage</span></a>
					</li>


					<li>
						<a href="beijing.html"><span class="cn">个人简历</span><span class="en">个人简历</span></a>
					</li>
					<li>
						<a href="Baoposhizhong.html"><span class="cn">爆破时钟</span><span class="en">爆破时钟</span></a>
					</li>


					<li>
						<a href="free.html"><span class="cn">自由坠体</span><span class="en">自由坠体</span></a>
					</li>


					<li>
						<a href="huizhihuabu.html"><span class="cn">绘制画布</span><span class="en">绘制画布</span></a>
					</li>
					
					<li>
						<a href="manyballs.html"><span class="cn">缤纷小球</span><span class="en">缤纷小球</span></a>
					</li>
					
					<li>
						<a href="screen .html"><span class="cn">屏幕保护</span><span class="en">屏幕保护</span></a>
					</li>


					<li>
						<a href="TaiJi3.html"><span class="cn">运动太极</span><span class="en">运动太极</span></a>
					</li>
					
					<li>
						<a href="Tantiaoxiaoqiu.html"><span class="cn">弹跳小球</span><span class="en">弹跳小球</span></a>
					</li>
				</ul>
			</div>
		<canvas id ="myCanvas" width="1400" height="750"></canvas>
		<script type="text/javascript">
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		var arcx = 50;
		var arcy = 50;
		var arc_vx = 5;
		var arc_vy = 0;
		
		setInterval(function(){
			ctx.fillStyle ="rgba(255,255,0,0.3)";
			ctx.fillRect(0,0,1400,750);
			
			ctx.beginPath();
			ctx.fillStyle = "#9ACD32";
			ctx.arc(arcx,arcy,50,0,2*Math.PI);
			ctx.fill();
			
			arc_vy = arc_vy+1.1;
			arcy =  arcy + arc_vy;
			arcx=arcx+arc_vx;
			
			if(arcy >= 750-50 ){
				arc_vy = -arc_vy;
				arc_vy = arc_vy*0.7;
				arcy =  600;
			}
			if(arcx >= 1440 - 50 ){
				arc_vx = -arc_vx;
				arcx= 1350;
			}
			
			if(arcx < 50){
				arc_vx = -arc_vx;
				arcx = 50;
			}
//			
		},16)
			
		</script>
	</body>
</html>
